<script setup>

</script>

<template>
    <div class="ss-search">
        <!-- 搜索图标 -->
        <svg class="ss-search-icon" width="34" height="30" viewBox="0 0 34 30" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M32.4485 24.8L25.3205 18.4C26.657 16.5333 27.3995 14.4 27.3995 12C27.3995 5.33333 21.4595 0 14.0346 0C6.60964 0 0.669678 5.33333 0.669678 12C0.669678 18.6667 6.60964 24 14.0346 24C16.7076 24 19.0836 23.3333 21.1625 22.1333L28.2905 28.5333C28.8845 29.0667 29.627 29.3333 30.3695 29.3333C32.003 29.3333 33.3395 28.1333 33.3395 26.6667C33.3395 25.8667 33.0425 25.2 32.4485 24.8ZM6.60964 12C6.60964 8.26667 9.87662 5.33333 14.0346 5.33333C18.1926 5.33333 21.4595 8.26667 21.4595 12C21.4595 15.7333 18.1926 18.6667 14.0346 18.6667C9.87662 18.6667 6.60964 15.7333 6.60964 12Z"
                fill="#50A2FF" />
        </svg>
        <!-- 搜索框 -->
        <input type="text">
    </div>
</template>



<style lang="scss" scoped>
.ss-search {
    width: 100%;
    background-color: var(--szc-bg-search-wight);
    height: 50px;
    border-radius: 25px;
    padding: 0 15px;
}

.ss-search-icon {
    position: relative;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

input {
    padding: 0 20px;
    width: 90%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: var(--szc-font-main-middle);

}
</style>